<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件生命周期</title>
</head>

<body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 转换jsx的库 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入PropType库  min没有警告-->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">/* 此处要写babel */
        // 生命周期 初始化阶段 更新阶段 卸载阶段
        // constructor
        // componentWillMount
        // render
        // componentDidMount
        // componentWillReceiveProps
        // shouldComponentUpdate
        // componentWillUpdate
        // componentDidUpdate
        // componentWillUnmount

        // 创建组件
        class Demo extends React.Component {
            // constructor
            constructor(props) {
                super(props)
                console.log('constructor')
                this.state = {
                    count: 0
                }
            }

            static getDerivedStateFromProps(props, state) {
                console.log('getDerivedStateFromProps-props', props)
                console.log('state', state)
                return props;
            }

            getSnapshotBeforeUpdate(prevProps, prevState) {
                console.log('getSnapshotBeforeUpdate-prevProps', prevProps)
                console.log('getSnapshotBeforeUpdate-prevState', prevState)
                return 'abc';
            }

            //  Demo uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
            //      UNSAFE_componentWillMount
            //      UNSAFE_componentWillUpdate
            // The above lifecycles should be removed. 

            // 组件即将挂载到页面上
            // UNSAFE_componentWillMount() {
            //     console.log('componentWillMount')
            // }
            // 组件挂载完毕
            componentDidMount() {
                console.log('componentDidMount');
            }
            // 组件将要卸载
            componentWillUnmount() {
                // root.unmount();
                console.log('componentWillUnmount');
            }
            // 是否应该更新
            // shouldComponentUpdate 默认返回值为true 写返回值为false就不更新了
            shouldComponentUpdate(nextProps, nextState) {
                console.log('shouldComponentUpdate');
                console.log('nextProps', nextProps);
                console.log('nextState', nextState);
                return true;
            }
            // 将要更新
            // UNSAFE_componentWillUpdate() {
            //     console.log('componentWillUpdate');
            // }
            // 更新完成
            componentDidUpdate() {
                console.log('componentDidUpdate');
            }
            add = () => {
                const { count } = this.state;
                this.setState({
                    count: count + 1
                })
            }
            Unmount = () => {
                root.unmount();
            }

            // 强制更新
            force = () => {
                this.forceUpdate();
            }
            // 渲染组件
            render() {
                console.log('render')
                return (
                    <>
                        <h2>当前和为：{this.state.count}</h2>
                        <button onClick={this.add}>点我加1</button>
                        <button onClick={this.Unmount}>点我卸载</button>
                        <button onClick={this.force}>强制更新</button>
                    </>
                )
            }
        }

        class A extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    carName: "奔驰"
                }
            }
            changeCar = () => {
                this.setState({
                    carName: "宝马"
                })
            }
            render() {
                return (
                    <>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>点击换车</button>
                        <B carName={this.state.carName} />
                    </>
                )
            }
        }
        class B extends React.Component {
            UNSAFE_componentWillReceiveProps() {
                console.log('B组件将要接受新的属性');
            }
            shouldComponentUpdate() {
                console.log('B组件是否应该更新');
                return true;
            }
            UNSAFE_componentWillUpdate() {
                console.log('B组件将要更新');
            }
            componentDidUpdate() {
                console.log('B组件更新完毕');
            }
            componentWillUnmount() {
                console.log('B组件将要卸载');
            }
            render() {
                const { carName } = this.props
                return (
                    <div>我有辆汽车{carName}</div>
                )
            }
        }
        const root = ReactDOM.createRoot(document.getElementById('test'));
        root.render(<Demo count={100} />);


    </script>
</body>

</html>